<template>
  <div class="homePage">
    <div class="topBox">
      <div class="firstBox">
        <div class="logo" @click="toIndex">
          <img src="../assets/logo.png" class="logoImg" />
          <h3>欢迎访问长沙市新型智慧城市全周期项目管理系统</h3>
        </div>
        <div class="dropMenu">
          <el-dropdown @command="handleCommand">
            <span class="avatar">
              项目管理经理-张三 <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command='my'>修改资料</el-dropdown-item>
              <el-dropdown-item command='quit'>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="loginBtns">
            账户设置
          </div>
        </div>
      </div>
      <div class="menuBox">
        <el-menu router :default-active="activeIndex" class="horMenu" mode="horizontal">
          <el-menu-item index="/home/tongchou">统筹规划</el-menu-item>
          <el-menu-item index="/home/shenbao">项目申报</el-menu-item>
          <el-menu-item index="/home/shenpi">项目审批</el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="container" :class="isCollapse?'hideSidebar':''">
      <div class="aside">
        <div class="sideMenuBox">
          <el-menu class="menu" router active-text-color="#1aad19" :default-active="activeMenu" :collapse="isCollapse">
            <template v-if="activeMenu.indexOf('/home/tongchou') != -1">
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-s-operation"></i>
                  <span>全市市发展规划</span>
                </template>
                <el-menu-item index="/home/tongchou/QSguihua">
                  <span slot="title">全市发展规划管理</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-s-operation"></i>
                  <span>专项发展规划</span>
                </template>
                <el-menu-item index="/home/tongchou/ZXguihua">
                  <span slot="title">专项发展规划上报</span>
                </el-menu-item>
                <el-menu-item index="/home/tongchou/ZXguihuashujuju">
                  <span slot="title">专项发展规划审核</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-s-operation"></i>
                  <span>中长期项目库</span>
                </template>
                <el-menu-item index="/home/tongchou/ZCQxiangmuList">
                  <span slot="title">中长期项目库管理</span>
                </el-menu-item>
                <el-menu-item index="/home/tongchou/ZCQxiangmusujujuList">
                  <span slot="title">中长期项目库管理数据局</span>
                </el-menu-item>
              </el-submenu>
            </template>
            <template v-else-if="activeMenu.indexOf('/home/shenbao') != -1">
              <el-submenu index="4">
                <template slot="title" >
                  <i class="el-icon-s-operation"></i>
                  <span>年度计划申报</span>
                </template>
                <el-menu-item index="/home/shenbao/jihua">
                  <span slot="title">年度计划申报</span>
                </el-menu-item>
                <el-menu-item index="/home/shenbao/xiangmu">
                <!-- <el-menu-item index="/home/shenbao/index"> -->
                  <span slot="title">项目申报管理</span>
                </el-menu-item>
                <!-- <el-menu-item index="/home/shenbao/xiangmu"> -->
                <!-- <el-menu-item index="/home/shenbao/index">
                  <span slot="title">项目申报管理--1</span>
                </el-menu-item> -->
                <el-menu-item index="/home/shenbao/index">
                  <span slot="title">项目申报管理-数据局</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="5">
                <template slot="title">
                  <i class="el-icon-s-operation"></i>
                  <span>项目备案登记</span>
                </template>
                <el-menu-item index="/home/shenbao/beian">
                  <span slot="title">项目备案登记管理</span>
                </el-menu-item>
                <el-menu-item index="/home/shenbao/beianList">
                  <span slot="title">项目备案登记管理-数据局</span>
                </el-menu-item>
              </el-submenu>
            </template>
            <template v-else-if="activeMenu.indexOf('/home/shenpi') != -1">
              <el-submenu index="6">
                <template slot="title">
                  <i class="el-icon-s-operation"></i>
                  <span>项目可研评审</span>
                </template>
                <el-menu-item index="/home/shenpi/keyan">
                  <span slot="title">项目可研评审管理</span>
                </el-menu-item>
                <el-menu-item index="/home/shenpi/keyan/shujuju">
                  <span slot="title">项目可研数据局管理</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="7">
                <template slot="title">
                  <i class="el-icon-s-operation"></i>
                  <span>项目初设及概算评审</span>
                </template>
                <el-menu-item index="/home/shenpi/chushe">
                  <span slot="title">项目初设及概算评审管理</span>
                </el-menu-item>
                <el-menu-item index="/home/shenpi/chusheshujuju">
                  <span slot="title">项目初设及概算数据局管理</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="8">
                <template slot="title">
                  <i class="el-icon-s-operation"></i>
                  <span>试点项目申报预算</span>
                </template>
                <el-menu-item index="/home/shenpi/shidian">
                  <span slot="title">试点项目申报预算管理</span>
                </el-menu-item>
                <el-menu-item index="/home/shenpi/shidianshujuju">
                  <span slot="title">试点项目申报预算数据局</span>
                </el-menu-item>
              </el-submenu>

            </template>
          </el-menu>
        </div>
      </div>
      <div class="main">
        <div class="appMain">
          <div class="mainCard">
            <router-view class="router-content"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  components: {
  },
  data () {
    return {
      isCollapse: false,
      activeIndex: '1',
      activeMenu: '/home/tongchou',
      userInfo: null
    }
  },
  created () {
    this.getUserInfo()
    this.activeMenu = this.$route.path
  },
  watch: {
    $route (to, from) {
      this.activeMenu = to.path
    }
  },
  methods: {
    getUserInfo () {
      this.axios.get('/sso/userInfo').then(res => {
        if (res.code === 1000) {
          this.userInfo = res.data
        }
      })
    },
    handleCommand (command) {
      if (command === 'quit') {
        this.toIndex('logout')
      } else if (command === 'my') {
        this.toPage('/home/user')
      }
    },
    toIndex (type) {
      let indexUrl = this.$config.API_URL
      if (type === 'buy') {
        indexUrl += '/home/taocan'
      } else if (type === 'logout') {
        indexUrl += '/home/login/out'
      } else if (type === 'login') {
        indexUrl += '/home/login/in'
      } else if (type === 'reg') {
        indexUrl += '/home/login/registe'
      }
      window.open(indexUrl, '_self')
    },
    toPage (url) {
      this.$router.push(url)
    }
  }
}
</script>
<style lang="less">
.homePage{
  .el-menu.el-menu--horizontal{
    border-bottom: none;
  }
  .aside{
    .el-menu{
      border-right: none;
      .el-submenu__title:hover{
        background-color: #fff;
      }
      .el-menu-item:focus, .el-menu-item:hover{
        background: #eceffa;
      }
      .el-menu-item.is-active{
        color: #4967CF!important;
      }
    }
  }
}
</style>
<style lang="less" scoped>
.homePage{
  .loginBtns{
    margin-left: 24px;
  }
  .topBox{
    // display: flex;
    // justify-content: flex-start;
    // align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 1002;
    .firstBox{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 1200px;
      height: 50px;
      margin: 0 auto;
      .logo{
        display: flex;
        align-items: center;
        cursor: pointer;
        h3{
          font-size: 14px;
          font-weight: normal;
          margin-left: 20px;
        }
        .logoImg{
          width: 115px;
          height: 16px;
        }
      }
      .dropMenu{
        display: flex;
        .avatar{
          cursor: pointer;
        }
      }
    }
    .menuBox{
      background: #4967CF;
      .horMenu{
        width: 1200px;
        height: 50px;
        margin: 0 auto;
        background: #4967CF;
        &>.el-menu-item {
          color: #fff;
          height: 50px;
          line-height: 50px;
          &:hover, &:focus{
            background: #4967CF;
            color: #fff;
            text-decoration: underline;
          }
        }
      }
    }
  }
  .container{
    flex: 1;
    flex-basis: auto;
    display: flex;
    &.hideSidebar{
      .aside{
        padding-top: 48px;
        width: 54px!important;
      }
      .main {
        margin-left: 54px;
      }
    }
    .aside {
      transition: width .28s;
      position: fixed;
      font-size: 0;
      top: 100px;
      bottom: 0;
      left: 0;
      padding-top: 0px;
      width: 210px!important;
      z-index: 998;
      overflow: hidden;
      box-shadow: 1px 0 10px 0 hsla(0,0%,53.3%,.1);
      background: #fff;
      .openBtnBox{
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        .openBtn{
          display: inline-block;
          cursor: pointer;
          background: #fff;
          border: 1px solid #dcdfe6;
          color: #606266;
          text-align: center;
          -webkit-transition: all .1s;
          transition: all .1s;
          font-weight: 700;
          padding: 6px 19px;
          font-size: 14px;
          &:hover{
            color: #409eff;
            border-color: #c6e2ff;
            background-color: #ecf5ff;
          }
        }
      }
      .userInfo{
        position: absolute;
        top: 0;
        z-index: 9;
        width: 100%;
        border-bottom: 1px solid #dcdee2;
        font-size: 14px;
        text-align: center;
        padding: 20px 0;
        .baseInfo{
          p{
            margin: 14px 0;
            color: #333;
          }
        }
      }
      .sideMenuBox{
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
      }
    }
    .main {
      transition: margin-left .28s;
      margin-left: 210px;
      padding-top: 100px;
      position: relative;
      background: #F6F6F6;
      // background-color: #f2f6fc;
      min-height: calc(100vh);
      width: 100%;
      .appMain{
        padding: 20px;
        position: relative;
        overflow: hidden;
        // .mainCard{
        //   border-radius: 4px;
        //   background: #fff;
        //   box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        //   .breadBox{
        //     padding: 14px 20px;
        //     border-bottom: 1px solid #EBEEF5;
        //   }
        //   .router-content {
        //     padding: 20px;
        //   }
        // }
      }
    }
  }
}
</style>
